<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <link rel="stylesheet" href="table.css">
    <script type="text/javascript">
        //密码校验
        function checkPassword() {
            //获取密码输入
            var uPass = document.getElementById("upwd").value.trim();
            var span = document.getElementById("span_password");
            //对密码输入进行校验
            if (uPass.length == 0) {
                span.innerHTML = "<font color='red' size='3'>不能为空</>";
                document.getElementById("submit").disabled = true;
                return false;
            } else if (uPass.length < 6 && uPass.length > 0) {
                span.innerHTML = "<font color='red' size='3'>密码过短</font>";
                document.getElementById("submit").disabled = true;
                return false;
            } else if (uPass.length > 14) {
                span.innerHTML = "<font color='red' size='3'>密码过长</font>";
                document.getElementById("submit").disabled = true;
                return false;
            } else {
                span.innerHTML = "<font color='green' size='3'>密码可用</font>";
                document.getElementById("submit").disabled = true;
                return true;
            }
        }

        //确认密码校验
        function checkRePassword() {
            //获取密码输入
            var uPass = document.getElementById("upwd").value.trim();
            //获取确认密码输入
            var uRePass = document.getElementById("repsword").value.trim();
            var span = document.getElementById("span_repassword");
            //对密码输入进行校验
            if (uPass != uRePass) {
                span.innerHTML = "<font color='red' size='3'>两次密码不一致</font>";
                return false;
            } else {
                span.innerHTML = "<font color='green' size='3'>两次密码一致</font>";
                document.getElementById("submit").disabled = false;
                return true;
            }
        }
    </script>
</head>
<body>
<h1>注册页面</h1>
<form action="enrolcheck.jsp" >
    <table>
        <tbody>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="uname"/></td>
        </tr>
        <tr>
            <td> 密码：</td>
            <td><input placeholder="密码" type="password" name="upwd" id="upwd" required="required"
                       onfocus="showTips('span_password','长度不能小于6且不能大于14')" onblur="checkPassword(),checkRePassword()"
                       onkeyup="checkPassword(),checkRePassword()"/>
            </td>
            <td><span id="span_password"></span></td>
        </tr>
        <tr>
            <td> 再次输入密码：</td>
            <td><input placeholder="重复密码" type="password" name="repsword" id="repsword" required="required"
                       onblur="checkRePassword()" onkeyup="checkRePassword()"/>
            </td>
            <td><span id="span_repassword"></span></td>
        </tr>
        <tr>
            <td>当前账户类型:</td>
            <td><select name="identity">
                <option value="user">普通用户</option>
                <option value="user">管理员</option>
                <option value="user">当前仅支持普通用户类型</option>
            </select>
            </td>
        </tr>
        <tr>
            <td><input type="submit" value="提交" name="use_type"></td>
            <td><input type="submit" value="返回" name="use_type"></td>
        </tr>
        </tbody>
    </table>
</form>
</body>
</html>
